<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="单号">
              <el-input placeholder="请输入单号" v-model="params.allowanceApplyNo" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入账状态">
              <el-select v-model="params.intoStatus" clearable>
                <el-option label="全部" :value="null" />
                <el-option label="已入账" :value="1" />
                <el-option label="未入账" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="推荐消费类型">
              <el-select v-model="params.moneyBaseType" @clear="abc('moneyBaseType')" clearable>
                <el-option label="全部" :value="null" />
                <el-option label="现金消费" :value="1" />
                <el-option label="积分消费" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="search">查询</el-button>
            <el-button
              type="primary"
              @click="exporfun"
              v-if="permissionJson.indexOf('AdminUsersRewardTransProvider.userRewardExport') !=-1"
            >导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div class="table" v-loading="tableLoading">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="realname" align="center" label="姓名" />
        <el-table-column prop="allowanceApplyNo" align="center" label="单号" />
        <el-table-column prop="type" align="center" label="类型" />
        <el-table-column prop="amount" align="center" label="金额" />
        <!-- <el-table-column prop="name" align="center" label="原有金额" />
        <el-table-column prop="name" align="center" label="现有金额" />-->
        <el-table-column prop="msg" align="center" label="操作信息" />
        <el-table-column prop="intoStatus" align="center" label="入账状态" />
        <el-table-column prop="expenses" align="center" label="税费">
          <template slot-scope="scope">{{scope.row.expenses?scope.row.expenses.toFixed(2):null}}</template>
        </el-table-column>
        <el-table-column prop="amountAf" align="center" label="税后入账">
          <template slot-scope="scope">{{scope.row.amountAf?scope.row.amountAf.toFixed(2):null}}</template>
        </el-table-column>
        <el-table-column prop="moneyBaseTypeValue" align="center" label="推荐消费类型" />
        <el-table-column prop="goldAwardFreezeValue" align="center" label="金币奖励是否冻结" />
        <el-table-column prop="freeze" align="center" label="是否冻结" width="180px">
          <template slot-scope="scope" v-if="scope.row.intoStatus">
            <!-- <div
              v-if="scope.row.freeze && permissionJson.indexOf('AdminUserProvider.changeAccountStatus') !=-1"
            >-->
            <!-- {{scope.row.freeze}} -->
            <!-- <span v-if="scope.row.intoStatus.indexOf('未')!=-1">
              <el-button
                v-if="scope.row.freeze.indexOf('未')!=-1"
                type="text"
                @click="jumfun(scope.row.number,1,1,scope.row.id)"
              >冻结</el-button>
              <el-button v-else type="text" @click="jumfun(scope.row.number,0,2,scope.row.id)">正常</el-button>
            </span>-->
            <!-- 是否冻结状态按钮 -->
            <!-- <div v-if="scope.row.intoStatus.indexOf('未')!=-1"> -->
            <el-switch
              v-if="scope.row.intoStatus.indexOf('未')!=-1"
              disabled
              class="demo"
              v-model="scope.row.isFreeze"
              active-text="正常"
              inactive-text="冻结"
              :active-value="1"
              :inactive-value="2"
              @click.native="jumfun(scope.row.number,scope.row.isFreeze,scope.row.id)"
            ></el-switch>
            <!-- {{scope.row.isFreeze}} -->
            <!-- </div> -->
            <!-- </div> -->
          </template>
        </el-table-column>
        <el-table-column
          v-if="this.$route.query.type"
          prop="freezeRemark"
          align="center"
          label="冻结备注"
        />
        <el-table-column v-else prop="accountStatusRemark" align="center" label="冻结备注" />
        <el-table-column prop="remark" align="center" label="备注信息" />
        <el-table-column prop="intoTime" align="center" label="入账时间" />
        <el-table-column prop="createdAt" align="center" label="创建时间" />
      </el-table>
    </div>
    <div class="block" style="margin: 40px 0;">
      <el-pagination
        :current-page="params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="请输入解除/冻结备注" :visible.sync="dialogVisible" width="468px" @close="handleClose">
      <el-form
        :rules="ruleForm"
        ref="ruleForm"
        :inline="true"
        label-width="80px"
        label-position="right"
        :model="FrozenInfo"
      >
        <el-form-item label="审核意见" prop="freezeRemark">
          <div v-if="$route.query.type">
            <el-input
              type="textarea"
              :rows="2"
              v-model="FrozenInfo.freezeRemark"
              placeholder="请输入内容"
            />
          </div>
          <div v-else>
            <el-input
              type="textarea"
              :rows="2"
              v-model="datas.accountStatusRemark"
              placeholder="请输入内容"
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import vipmange from "@/api/vipmange/vipmange";
import { exportfile } from "@/api/commjs/exprot";
import { changeAccountStatus } from "@/api/vipIndex";
import {
  userRewardList,
  exportServer,
  changeIsFreezeStatus
} from "@/api/ServiceManagement";

export default {
  name: "bonusDetails",
  data() {
    return {
      // loading层
      tableLoading: false,
      datas: {
        userId: 0,
        status: 0,
        accountStatusRemark: ""
      },
      //冻结提交信息
      FrozenInfo: {
        id: 0,
        userId: 0,
        freeze: 1,
        isFreeze: 1,
        freezeRemark: ""
      },
      permissionJson: JSON.parse(localStorage.getItem("permissionJson")),
      params: {
        pageNum: 1,
        pageSize: 10,
        userId: 0,
        allowanceApplyNo: null,
        intoStatus: null
      },
      tableData: [{ number: 100 }],
      total: 0,
      dialogVisible: false,
      //校验规则
      ruleForm: {
        freezeRemark: [
          { required: true, message: "请输入审核意见", trigger: "blur" }
        ]
      }
    };
  },
  inject: ["reload"],
  created() {
    // console.log(this.$route.query);
    this.FrozenInfo.userId = this.$route.query.userId;
    this.params.userId = this.$route.query.userId - 0;
    this.datas.userId = this.$route.query.userId - 0;
    // this.FrozenInfo.id = this.$route.query.id - 0;
    this.list();
  },
  watch: {
    "params.allowanceApplyNo": {
      handler(val, oldName) {
        if (!val) {
          this.params.allowanceApplyNo = null;
        }
      },
      immediate: true
    },
    "params.intoStatus": {
      handler(val, oldName) {
        if (!val && val != "0") {
          this.params.intoStatus = null;
        }
      },
      immediate: true
    }
  },
  methods: {
    //清空
    abc(val) {
      if (!this.params[val]) this.params[val] = null;
      console.log(val, this.params[val]);
    },
    //详情
    async list() {
      this.tableLoading = true;
      let res;
      if (this.$route.query.type) {
        res = await userRewardList(this.params);
        // console.log("详情");
        console.log(res);
      } else {
        res = await vipmange.userRewardList(this.params);
      }
      // let res = await vipmange.userRewardList(this.params);
      if (res.data.code == 0) {
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
        this.tableLoading = false;
      } else {
        this.$message({
          message: res.data.msg,
          type: "warning"
        });
      }
    },
    //查询
    search() {
      this.params.pageNum = 1;
      this.list();
    },
    //对话框关闭
    handleClose() {
      this.FrozenInfo.freezeRemark = "";
      // this.FrozenInfo.freeze = this.FrozenInfo.freeze == 1 ? "2" : "1";
      console.log(this.FrozenInfo.freeze);
      //   if (this.FrozenInfo.freeze.indexOf("正") != -1) {
      //     this.FrozenInfo.freeze = "冻结";
      //   } else {
      //     this.FrozenInfo.freeze = "正常";
      //   }
    },
    // 弹窗
    jumfun(number, isFreeze, id) {
      // 是否冻结
      // let flag = freeze //保存点击之后v-modeld的值(true，false)
      // freeze = !freeze //保持switch点击前的状态
      this.datas.status = number;
      this.FrozenInfo.freeze = isFreeze == 1 ? "2" : "1";
      // this.FrozenInfo.freeze = isFreeze;
      // console.log(isFreeze);

      this.FrozenInfo.id = id;
      this.dialogVisible = true;
    },
    //弹窗确认
    async sure() {
      let res;
      if (this.$route.query.type) {
        // console.log(111, this.params.userId);
        res = await changeIsFreezeStatus(this.FrozenInfo);
        // console.log(this.FrozenInfo.freeze);
      } else {
        res = await changeAccountStatus(this.datas);
      }
      // console.log(res);
      // let res = await changeAccountStatus(this.datas);
      if (res.data.code == 0) {
        this.$message({
          message: res.data.msg,
          type: "success"
        });
        this.$router.go(-1);
        this.reload();
      } else {
        this.$message.error(res.data.msg);
      }
    },
    //导出
    exporfun() {
      if (this.$route.query.type) {
        exportfile(
          "com.mmk.member.api.AdminUsersRewardTransProvider/1.0.0/userRewardExport.html",
          this.params
        );
      } else {
        exportfile(
          "com.mmk.member.api.AdminUsersRewardTransProvider/1.0.0/userRewardExport.html",
          this.params
        );
      }
    },
    handleSizeChange(val) {
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list();
    }
  }
};
</script>
<style scoped>
.demo .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
.demo .el-switch__label--right {
  z-index: 1;
  right: -3px;
}
/*关闭时文字位置设置*/
.demo .el-switch__label--left {
  z-index: 1;
  left: 19px;
}
/*显示文字*/
.demo .el-switch__label.is-active {
  display: block;
}
.demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}
</style>>